<template>
  <div class="login-box">
    <div class="login-card mt-5">
      <h1 class="login-title mt-5">
        Admin
        <small>I8</small>
      </h1>
      <el-card class="login-body">
        <div class="login-text mb-5">Sign in to start your session</div>
        <el-form ref="form">
          <el-form-item>
            <el-input placeholder="Username" suffix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="Email" suffix-icon="el-icon-message"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="Password" suffix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="Retype password" suffix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="VerifyCode" suffix-icon="el-icon-help"></el-input>
          </el-form-item>
          <div style="display:flex; justify-content:space-between; ">
            <el-form-item>
              <el-checkbox name="type">
                I agree to the
                <a href="#">terms</a>
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">Register</el-button>
            </el-form-item>
          </div>
          <div class="text-align-center">- OR -</div>
          <div>
            <el-button type="danger" icon="el-icon-search" class="mt-1 w-100">
              <i class="fa fa-qq" aria-hidden="true"></i>
              Sign in using QQ
            </el-button>
          </div>
          <div>
            <el-button type="success" icon="el-icon-search" class="mt-1 w-100">
              <i class="fa fa-wechat" aria-hidden="true"></i>
              <icon name="home"></icon>Sign in using WeChat
            </el-button>
          </div>
          <div class="mt-2">
            <router-link type="primary" to="login">I already have a membership</router-link>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  &:hover {
    color: #0056b3;
    text-decoration: none;
  }
}
.login-box {
  background: #e9ecef;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-title {
    text-align: center;
  }
  .login-card {
    @media screen and(max-width: 567px) {
      width: 100%;
    }
    @media screen and(min-width: 567px) {
      width: 360px;
    }
    .login-body {
      .login-text {
        text-align: center;
      }
    }
  }
}
.text-align-center {
  text-align: center;
}
@for $i from 1 through 10 {
  .mt-#{$i} {
    margin-top: (5px * $i);
  }
}
@for $i from 1 through 10 {
  .mb-#{$i} {
    margin-bottom: (5px * $i);
  }
}
.w-100 {
  width: 100%;
}
</style>